
// wrapper

class ElementWrapper {
    constructor(type){
        this.root = document.createElement(type);
    }
    setAttribute(name, value){
        this.root.setAttribute(name, value)
    }
    appendChild(component){
        this.root.appendChild(component.root);
    }
}

class TextWrapper {
    constructor(content){
        this.root = document.createTextNode(content);
    }
}

export class Component {
    constructor(){
        this.props = Object.create(null);
        this.children = [];
        this._root = null;
    }
    setAttribute(name, value){
        this.props[name] = value;
    }
    appendChild(component){
        this.children.push(component);
    }
    get root(){
        if(!this._root){
            this._root = this.render().root;
        }
        return this._root;
    }
}

// webpack.config.js中plugins中调用
export function createElement(type, attributes, ...children){
    let e ;
    if(typeof type === 'string'){
        e = new ElementWrapper(type);
    }else{
        e = new type;
    }
    
    for(let p in attributes){
        e.setAttribute(p,attributes[p])
    }
    let insertChildren = (children) => {
        for(let child of children){
            if(typeof child === 'string'){
                child = new TextWrapper(child)
            }
            if((typeof child === 'object') && (child instanceof Array)){
                insertChildren(child)
            }else{
                e.appendChild(child)
            }
        }
    }
    insertChildren(children);
    return e;
}

export function render(component, parentElement){
    parentElement.appendChild(component.root)
}



// export function createElement(type, attributes, ...children){
//     let e ;
//     if(typeof type === 'string'){
//         e = document.createElement(type);
//     }else{
//         e = new type;
//     }
    
//     for(let p in attributes){
//         e.setAttribute(p,attributes[p])
//     }
//     for(let child of children){
//         if(typeof child === 'string'){
//             child = document.createTextNode(child)
//         }
//         e.appendChild(child)
//     }
//     return e;
// }